<template>
	<div class="special-hot">
		<img v-lazy="require('@/assets/images/index/special/hot-background.png')" />

		<div class="goods-tabs">
			<van-tabs
				v-model="active"
				background="#FFFFFF"
				title-active-color="#F70114"
				title-inactive-color="#171717"
				color="#FF0D8F"
				:border="false"
				sticky
				animated
				swipeable
				@click="tabChange"
				@change="tabChange"
			>
				<van-tab v-for="(item, index) in list" :title="item.title" :key="index">
					<van-pull-refresh v-model="isRefresh" @refresh="onRefresh(item)">
						<van-list
							v-model="item.loading"
							:finished="item.finished"
							:error.sync="item.error"
							@load="loadMore(item, '', index)"
							finished-text="没有更多了"
							loading-text="拼命加载中"
						>
							<!--渲染商品列表-->
							<div class="goods-list" v-if="item.goodsList.length > 0">
								<div class="goods-item" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="'goods' + goodsIndex">
									<div class="top">
										<div class="img-box">
											<div class="flag" v-if="goodsIndex <= 19">
												<img
													v-if="goodsIndex === 0"
													class="flag-image"
													src=""
												/>
												<img
													v-else-if="goodsIndex === 1"
													class="flag-image"
													src=""
												/>
												<img
													v-else-if="goodsIndex === 2"
													class="flag-image"
													src=""
												/>
												<img
													v-else
													class="flag-image"
													src=""
												/>
												<p class="text">{{ goodsIndex + 1 }}</p>
											</div>

											<img class="image" :src="goodsItem.pic" />
										</div>

										<div class="right">
											<p class="shop-type">{{ goodsItem.shoptype === 1 ? '天猫' : '淘宝' }}</p>
											<p class="goods-name">{{ goodsItem.title }}</p>
											<div class="coupon-box">
												<div class="box">
													<div class="coupon"><span>券</span>{{ goodsItem.couponMoney }}元</div>
													<div class="allow"><span>补贴</span>{{ goodsItem.allowanceMoney | Fixed(2) }}元</div>
												</div>
												<p class="price">
													券后价¥{{ goodsItem.endPrice | Fixed(2)
													}}<span class="old">{{ goodsItem.price | Fixed(2) }}</span>
												</p>
											</div>
											<p class="sale">热销{{ goodsItem.sale }}件</p>
										</div>
									</div>
									<div class="bottom">
										<div class="share" @click="toShare(goodsItem)">分享赚¥{{ goodsItem.shareMoney | Fixed(2) }}</div>
										<div class="coupon" @click="getPrivilege(goodsItem)">抢{{ goodsItem.couponMoney }}元优惠券</div>
									</div>
								</div>
							</div>

							<div slot="error">
								<empty emptyText="暂无商品" offsetTop="150"></empty>
							</div>
						</van-list>
					</van-pull-refresh>
				</van-tab>
			</van-tabs>
		</div>

		<authorize-dig ref="authorizeDig"></authorize-dig>
		<!--复制成功-->
		<van-popup class="copy-popup" get-container="body" v-model="visible" closeable>
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { Tab, Tabs, PullRefresh, List, Popup, Toast } from 'vant';
import { Empty, AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'special-hot',
	components: {
		'van-tab': Tab,
		'van-tabs': Tabs,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-popup': Popup,
		Empty,
		AuthorizeDig
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			active: 0,
			list: [
				// {
				// 	id: '',
				// 	title: '全部',
				// 	loading: false,
				// 	finished: false,
				// 	error: false,
				// 	goodsList: [],
				// 	page: 1
				// }
			],
			params: {
				page: 1,
				size: 20,
				order: 'ysqLevel',
				sort: 'desc',
				specialType: 0,
				app: 'yzf'
			},
			visible: false,
			tkl: null
		};
	},
	created() {
		this.getClassifyList();
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		// 获取一级分类列表
		getClassifyList() {
			// 获取一级分类
			this.$service.shopping.specialClassify
				.list({
					specialType: 0
				})
				.then(res => {
					res.forEach(item => {
						item.title = item.mainName;
						item.loading = false;
						item.finished = false;
						item.error = false;
						item.goodsList = [];
						item.page = 1;
					});
					this.list = this.list.concat(res);
				});
		},
		// 异步加载数据
		loadMore(item, operate) {
			if (Number(item.id) === 0) {
				this.params.floorId = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
			} else {
				this.params.floorId = item.floorId;
				this.params.order = '';
				this.params.sort = '';
			}
			this.params.page = item.page;
			this.$service.shopping.specialGoods.page(this.params).then(res => {
				// 刷新列表
				if (operate === 'refresh') {
					item.goodsList = [];
					this.$toast('刷新成功');
					this.isRefresh = false;
				}
				item.goodsList = item.goodsList.concat(res.list);

				// 加载状态结束
				item.loading = false;
				item.page += 1;

				// 暂无数据
				if (item.goodsList.length === 0) {
					item.page = 1;
					item.error = true;
				} else if (item.goodsList.length >= res.pagination.total) {
					// 数据全部加载完成
					item.finished = true;
				}
			});
		},
		// 下拉刷新
		onRefresh(item) {
			item.error = false;
			item.loading = false;
			item.finished = false;
			item.page = 1;
			this.loadMore(item, 'refresh');
		},
		// tab切换还原page
		tabChange() {
			document.getElementById('container').scrollTop = 0;
		},
		toShare(item) {
			if (this.userInfo.tbStatus === 1) {
				let params = {
					title: item.title,
					itemId: item.gid
				};
				this.$service.shopping.taobao.privilege(params).then(() => {
					this.$router.push({
						path: '/goods-share',
						query: {
							gid: item.gid
						}
					});
				});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		},
		// 获取淘口令
		getPrivilege(item) {
			if (this.userInfo.tbStatus === 1) {
				Toast.loading({
					duration: 0, // 持续展示 toast
					forbidClick: true,
					message: '正在生成淘口令...'
				});
				let params = {
					title: item.title,
					itemId: item.gid
				};
				this.$service.shopping.taobao.privilege(params).then(res => {
					if (res.tkl) {
						this.tkl = res.tkl;
					} else {
						this.tkl = res.coupon_click_url;
					}

					if (this.tkl) {
						window.BestpayHtml5.System.setClipboardContent(
							{
								data: this.tkl
							},
							() => {
								Toast.clear();
								this.visible = true;
								setTimeout(() => {
									this.visible = false;
								}, 5000);
							}
						);
					} else {
						this.$toast('淘口令为空');
					}
				});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		}
	},
	destroyed() {
		Toast.clear();
	}
};
</script>

<style lang="scss" scoped>
.special-hot {
	// background: #ffffff;
	min-height: 100%;
	.goods-tabs {
		margin: 0 auto;
		.van-list {
			padding: 24px;
			min-height: 850px;
			margin-top: 30px;
			background: rgba(246, 247, 250, 1);
			.goods-list {
				margin-bottom: 30px;
				.goods-item {
					border-radius: 16px;
					background: #fff;
					margin-bottom: 50px;
					padding-bottom: 30px;
					.top {
						height: 280px;
						display: flex;
						justify-content: space-between;
						.img-box {
							width: 244px;
							height: 244px;
							margin-top: -20px;
							background: #fff;
							border-radius: 16px;
							overflow: hidden;
							margin-left: 20px;
							box-shadow: 0 0px 10px #ccc;
							position: relative;
							.flag {
								width: 40px;
								position: absolute;
								left: 20px;
								display: flex;
								flex-direction: column;
								.flag-image {
									width: 100%;
									position: absolute;
								}
								.text {
									color: #fff;
									font-size: 30px;
									text-align: center;
									z-index: 10;
								}
							}
						}
						.right {
							color: #434343;
							font-size: 24px;
							flex: 1;
							.shop-type {
								background: $main-color;
								width: fit-content;
								padding: 0 10px;
								color: #fff;
								margin: 10px 20px;
								border-radius: 8px;
								font-size: 20px;
							}
							.goods-name {
								padding-left: 20px;
								@include ellipsis(2);
							}
							.coupon-box {
								padding: 10px;
								background: linear-gradient(91deg, rgba(255, 234, 241, 1) 0%, rgba(255, 253, 254, 1) 100%);
								margin: 10px 0;
								.box {
									display: flex;
									.coupon,
									.allow {
										background: #fff;
										border: 1px solid $main-color;
										color: $main-color;
										width: fit-content;
										padding-right: 10px;
										display: flex;
										margin-right: 10px;
										span {
											background: $main-color;
											color: #fff;
											display: block;
											padding: 0 10px;
											margin-right: 10px;
										}
									}
									.allow {
										border: 1px solid #fadfae;
										color: #a27a46;
										span {
											background: #fadfae;
											color: #a27a46;
										}
									}
								}
								.price {
									color: #ff0036;
									margin-top: 6px;
									font-size: 20px;
									.old {
										color: #9b9b9b;
										text-decoration: line-through;
										margin-left: 10px;
									}
								}
							}
							.sale {
								padding-left: 20px;
								color: #b5b5b5;
							}
						}
					}
					.bottom {
						border-top: 1px solid #f8f8f8;
						padding: 14px 0;
						display: flex;
						justify-content: space-between;
						.share {
							background: #ffd8e1;
							line-height: 64px;
							border-radius: 0 50px 50px 0;
							width: fit-content;
							padding: 0 30px;
							color: #ff0036;
							font-size: 28px;
						}
						.coupon {
							background: #ff0134;
							line-height: 64px;
							border-radius: 50px 0 0 50px;
							width: fit-content;
							padding: 0 30px;
							font-size: 28px;
							color: #fff;
						}
					}
				}
			}
		}
	}
}
.copy-popup {
	width: 452px;
	height: 336px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
	}
}
/deep/.van-sticky {
	border-radius: 8px;
	// overflow: hidden;
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
	margin-top: -21px;
	&.van-sticky--fixed {
		border-radius: 0px;
	}
}

/deep/ .van-tabs {
	.van-tab {
		flex-basis: unset !important;
		padding: 0 30px;
		.van-ellipsis {
			transition: 0.3s;
		}
		.van-tab__text {
			transition: 0.3s;
		}
		&.van-tab--active {
			.van-tab__text {
				color: #ff0d8f;
			}
		}
	}
	.van-tabs__line {
		height: 8px;
		width: 40px !important;
		transform: translateX(33px) translateX(-50%);
		background-color: $main-color;
	}

	.van-tab__pane-wrapper--inactive {
		overflow: hidden;
	}
}
</style>
